import React, { Component } from 'react'
import './SwiperDetails.scss'
import { connect } from 'react-redux'
import Content from './swiperCont/swipercont'
import TopIMmg from './swiptopimg/swipertopimg'
class SwiperDetails extends Component {
    constructor(props) {
        super(props)
        this.Scoll = React.createRef()
    }
    state = {
        ysxd: false
    }
    componentDidMount() {

        // 给滚动条绑定事件
        // console.log(this.Scoll.current);
        this.Scoll.current.addEventListener('scroll', this.handleScoll)

    }

    handleScoll = () => {
        let scrollData = this.Scoll.current.scrollTop
        if (scrollData >= 4450) {
            if (!this.state.ysxd) {
                this.setState({
                    ysxd: true
                })

            }


        } else {
            if (this.state.ysxd) {
                this.setState({
                    ysxd: false
                })
                // console.log(2)

            }

        }

    }

    render() {
        return (
            <div className='swiperImgBox' ref={this.Scoll}>
                <div >
                    <TopIMmg></TopIMmg>
                </div>
                <div className='shopingBboot'>
                    <div >
                        <Content contxd={this.state.ysxd}></Content>
                    </div>

                </div>
            </div>


        )
    }
}
const mapActionToProps = (defaulting) => {
    return {
        Imbibition: (bool) => {
            // 点击休闲触发
            let action = {
                type: 'IMBIBITION',
                payload: bool
            }
        }
    }
}
const mapStateToProps = (state) => {
    return {
        Imbibition: state.SwiperContReducer.Imbibition
    }
}
export default connect(mapStateToProps, mapActionToProps)(SwiperDetails)